<!-- Bootstrap -->
<link href="/vendors/datatables.net-bs/css/dataTables.bootstrap4.min.css" rel="stylesheet">

<main class="app-content" id="modulesDiv">
    <div class="app-title">
        <div>
            <h1>
                <i class="fa fa-th-list "></i>
                留言管理
            </h1>
            <p>在此页面进行留言管理</p>
        </div>
        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item">
                <i class="fa fa-home fa-lg"></i>
            </li>
            <li class="breadcrumb-item">
                <a href="#">留言管理</a>
            </li>
        </ul>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="tile">
                <div class="tile-body">
                    <table id="moduleTable" class="table table-striped table-bordered"
                           style="width:100%">
                        <thead>
                        <tr>
                            <th>编号</th>
                            <th>留言</th>
                            <th>留言时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div th:replace="other/messageEdit"></div>
</main>

<!-- Datatables -->
<script src="/vendors/datatables.net/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="/vendors/datatables.net-bs/js/dataTables.bootstrap4.js" type="text/javascript"></script>

<script type="text/javascript">
    var modulesVue = new Vue({
        el: "#modulesDiv",
        data: {
            pageSize: 5,
            modulesTable: {},
            message: {
                messageId: "",
                messageDetail: "",
                createTime: "",
            }
        },
        methods: {
            RowData: function (id, messageId, messageDetail, createTime) {
                var row = {};
                row.id = id;
                row.messageId = messageId;
                row.messageDetail = messageDetail;
                row.createTime = createTime;
                row.operate = function () {
                    return "<a href='javascript:void(0);' class='btn_editcolor' data-toggle='modal' data-target='#editModal' onclick='initEditModal(\"" + messageId + "\")'>编辑</a>&nbsp;" +
                        "<a href='javascript:void(0);' onclick='deleteModule(\"" + messageId + "\")' class='btn_editcolor'>删除</a>";
                }
                return row;
            },
            initTable: function (pageSize) {
                var self = this;
                self.modulesTable = $('#moduleTable').DataTable({
                    'paging': true,
                    "serverSide": true,
                    "pagingType": "full_numbers",
                    "pageLength": pageSize,
                    "processing": true,
                    "destroy": true,
                    'lengthChange': true,
                    'lengthMenu': [5, 10, 25, 50],
                    'searching': true,
                    'data-show-refresh': true,
                    'ordering': true,
                    'autoWidth': true,
                    "language": {
                        "paginate": {
                            "sNext": ">",
                            "sPrevious": "<",
                            "sFirst": "首页",
                            "sLast": "尾页",
                        },
                        "sLengthMenu": "显示 _MENU_ 项结果",
                        "sSearch": "搜索：",
                        "sProcessing": "搜索中",
                        "sLoadingRecords": "载入中...",
                        "sZeroRecords": "对不起，查询不到任何相关数据",
                        "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录。",
                        "sInfoFiltered": "（数据库中共为 _MAX_ 条记录）",
                        "sInfoEmpty": "当前显示0到0条，共0条记录",
                    },
                    "ajax": function (data, callback, settings) {
                        var columIndex = data.order[0].column;
                        var direction = data.order[0].dir;
                        var orderBy = data.columns[columIndex].name;
                        pageSize = data.length === undefined ? pageSize : data.length;

                        var searchBean = {};
                        searchBean.currentPage = (data.start / pageSize) + 1;
                        searchBean.pageSize = pageSize;
                        searchBean.orderBy = orderBy;
                        searchBean.direction = direction;
                        searchBean.keyword = data.search.value;

                        $.ajax({
                            url: "/api/messages",
                            type: "post",
                            contentType: "application/json",
                            data: JSON.stringify(searchBean),
                            success: function (rs) {
                                var tableData = {
                                    draw: 0,
                                    recordsTotal: 0,
                                    recordsFiltered: 0,
                                    data: []
                                };
                                if (!rs) {
                                    layer.alert("请求出错，请稍后重试" + rs.message, {icon: 2});
                                    callback(tableData);
                                    return;
                                }
                                ;
                                if (rs.list == null) {
                                    $('#moduleTable tbody tr').remove();
                                    $('#loading').remove();
                                    callback(tableData);
                                    return;
                                }
                                $('#loading').remove();
                                var rowsData = [];
                                for (var i = 0; i < rs.list.length; i++) {
                                    var rowData = self.RowData(i + 1, rs.list[i].messageId, rs.list[i].messageDetail, rs.list[i].createTime);
                                    rowsData.push(rowData);
                                }
                                tableData.data = rowsData;
                                tableData.recordsTotal = rs.total;
                                tableData.recordsFiltered = rs.total;
                                callback(tableData);
                            },
                            error: function (data) {
                                layer.alert(data.responseText, {icon: 0});
                            }
                        });
                    },
                    "columns": [
                        {data: 'id', name: "message_id", sortable: true},
                        {data: 'messageDetail', name: "message_detail", sortable: true, width: '50%'},
                        {data: 'createTime', name: "create_time", sortable: true},
                        {data: 'operate', width: '80px', sortable: false}
                    ]
                });
            },

            initEditModal: function (id) {
                var self = this;
                console.log(id)
                $.ajax({
                    url: "/api/message/" + id,
                    type: "get",
                    success: function (rs) {
                        self.message = rs;
                    },
                    error: function (rs) {
                        layer.alert(rs.responseText, {icon: 0});
                    }
                });
            },

            updateModule: function () {
                var self = this;
                $.ajax({
                    url: "/api/message",
                    type: "put",
                    contentType: "application/json",
                    data: self.message,
                    success: function (rs) {
                        if (rs.status === 200) {
                            self.initTable(self.pageSize);
                        } else {
                            layer.alert(rs.message, {icon: 0});
                        }
                    },
                    error: function (rs) {
                        layer.alert(rs.responseText, {icon: 0});
                    }
                });
            },

            deleteModule: function (id) {
                var self = this;
                bootbox.confirm({
                    message: "确认删除？",
                    buttons: {
                        confirm: {
                            label: "确定"
                        },
                        cancel: {
                            label: "取消"
                        }
                    },
                    callback: function (result) {
                        if (result) {
                            $.ajax({
                                url: "/api/message/" + id,
                                type: "delete",
                                success: function (rs) {
                                    if (rs.status === 200) {
                                        self.initTable(self.pageSize);
                                    } else {
                                        window.location.href = rs.data;
                                    }
                                },
                                error: function (rs) {
                                    layer.alert(rs.responseText, {icon: 0});
                                }
                            });
                        }
                    }
                })
            }
        },

        created: function () {
            window.initEditModal = this.initEditModal;
            window.deleteModule = this.deleteModule;
        },
        mounted: function () {
            this.initTable(this.pageSize);
        }
    });

</script>